<template>
  <div>
    <div>the recommend using  way of worker</div>
    <div>计算结果：{{showPageRef}}</div>
  </div>
</template>
<script setup>

//Recommend to read
//https://blog.csdn.net/damo_qian/article/details/112757281

/*推荐worker使用方式*/
// 方式，函数直接转换
const  workerCode=()=> {
  onmessage = (e) => {
    console.time("加载时间")
    console.log("接收到主线程的信息"+e.data);
    //处理复杂的js逻辑
    let countNum=0
    for (let i = 0; i < e.data; i++) {
      countNum=i+countNum
    }
    //处理完毕返回主线程
    console.log("子线程数据处理完毕返回主线程");
    console.timeEnd("加载时间")
    postMessage(countNum);
  }

}


//change func to url for worker using
const changeFuncToUrl=(func)=>{
  const workBlob = new Blob([`(${func.toString ()})()`]); // 把函数转成一个自执行函数
  const url = URL.createObjectURL(workBlob);
  return new Worker(url);
}


//主线程逻辑
const worker=changeFuncToUrl(workerCode);
worker.postMessage(30000000)
let  showPageRef=ref(null)
worker.onmessage = (e) => {
  console.log(`主进程收到了子进程发出的信息：${e.data}`);
  showPageRef.value=e.data
  //停止线程（注:用完后一定要停止）
  worker.terminate();
}
</script>
